在上篇有使用到一個名為<LocationDetail>的自訂元件，這篇就來講講自訂元件的用途～

React Native允許我們將會重複使用的標籤定義為一個「自訂元件」，善用「自訂元件」可讓App程式亦於維護，此外元件內的變數都是區域變數，不會影響元件以外的變數。

任務列表中的每個項目排版格式是固定的，所以我將其製作成自訂元件。首先先建立一個名為components的資料夾並在其中新增名為LocationDetail.js的檔案。
＊小提醒：檔案名稱一定要大寫開頭這是規定！！

接下來將要渲染的畫面寫進檔案中，最後利用模組指令export將定義的LocationDetail元件輸出。

import React, { useContext } from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity, Linking,ImageBackground} from "react-native";

const LocationDetail = ({ location, navigation }) => {
   return (
      <View style={styles.cardContainerStyle}>
        <TouchableOpacity 
            onPress={()=>{navigation.navigate('Detail',location);}} activeOpacity={0.6}>
            <View style={[styles.locationbox,{backgroundColor:bgcolor}]}>
              <ImageBackground style={{flex:1,width:"95%",flexDirection:"row"}} source={{uri:location.bgimage}}>
                <View style={styles.titlebox}>
                  <Text style={styles.locationtitle}>{location.title}</Text>
                </View>
               <Text style={[styles.stateStyle,{color:statecolor}]}>{state}</Text>  
              </ImageBackground>
              
            </View>
          </TouchableOpacity>
      </View>
  )};

const styles = StyleSheet.create({
  cardContainerStyle: {
    borderWidth: 1,
    borderColor: "#ddd",
    shadowColor: "#000",
    shadowOffset: { width: 3, height: 3 },
    shadowOpacity: 0.1,
    elevation: 1,
    marginLeft: 24,
    marginRight:24,
    marginTop: "5%",
    marginBottom:4,
    backgroundColor: "#DBDBDB"
  },
  cardSectionStyle: {
    padding: 5,
    backgroundColor: "#fff",
    borderColor: "#ddd",
    borderBottomWidth: 1
  },
  imageStyle: {
    height: 300,
    width: null
  },
  locationbox:{
    height:72,
    backgroundColor: "#DBDBDB",
    flexDirection:"row"
  },
  titlebox:{
    justifyContent:"center"
  },
  locationtitle:{
    fontSize:18,
    color:"#000000",
    height:22,
    marginLeft:40,
    width:105
  },
  stateStyle:{
    marginTop:48,
    marginLeft:"37.5%",
    fontSize:16,
  },
});

export default LocationDetail;

之後再到需要用到此自訂元件的檔案中將LocationDetail匯入就好：

import LocationDetail from "../components/LocationDetail";

因為LocationDetail有兩個引數，所以使用元件的時候需要進行設定，如在上篇提到的FlatList中設定renderItem的部分：

<FlatList
      data={ locationData.locationList }
      renderItem={({ item }) => 
      <LocationDetail 
        location={item}       
        navigation={navigation}
      />
      }
      keyExtractor={item => item.title}
/>